<template>
  <div class="custom-tab-page">
    <div>
      <div class="tab2-title">
        <div class="left">基本信息</div>
        <el-button size="small" class="right" type="primary" v-if="permissions" @click="openInfo">
          <el-icon>
            <IEpEditPen />
          </el-icon>
          编辑</el-button>
      </div>
      <el-descriptions style="margin-top: 15px" :column="2" border>
        <el-descriptions-item v-for="item in topTable">
          <template #label>
            <div>
              {{ item.name }}
            </div>
          </template>
          <span>
            {{ customer[item.field] }}
          </span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="tab2-title" style="margin-top: 20px" v-loading="certloading">
        <div class="left">资质证件</div>
        <el-button size="small" class="right" type="primary" @click="openCert" v-if="permissions">
          <el-icon>
            <IEpPlus />
          </el-icon>
          添加</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%; margin-top: 15px">
        <el-table-column prop="cert_name" label="资质证件名称" />
        <el-table-column prop="cert_code" label="证件号" />

        <el-table-column prop="valid_limit" label="是否有有效期" width="130">
          <template #default="{ row }">
            <el-tag v-if="row.valid_limit == 0" type="warning">否</el-tag>
            <el-tag v-else-if="row.valid_limit == 1"> 是 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="valid_date" label="有效期" />
        <el-table-column prop="files" label="证件文件地址">
          <template #default="{ row }">
            <a :href="row.files" :download="row.cert_name" target="_blank">
              下载
            </a>
            <!-- <el-button type="primary" link @click="downFile(row.files)">下载</el-button> -->
          </template>
        </el-table-column>
        <el-table-column width="120" label="操作" v-if="permissions">
          <template #default="{ row }">
            <el-button type="primary" link @click="updateOpen(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click="delFun(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <dialogInfo ref="dialogInfoRef" @refreshTable="refreshTable" />
  <certAddPage ref="certAddPageRef" :dataInfo="dataInfo" @refreshList="refreshCert" />
</template>
<script setup>
import dialogInfo from "./DialogPool.vue";
import certAddPage from "./tabDialog/Tab2-dialog.vue";
import { customerApi } from "@/plugins/api/customer/setup/fifth";
import { listApi, delApi } from "@/plugins/api/customer/manage/cert";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();
const props = defineProps({
  customer: {
    type: Object,
    default: {},
  },
  dataInfo: {
    type: Object,
    default: {},
  },
  showItem: {
    type: Boolean,
    default: false,
  },
});
let permissions = computed(() => {
  let arr = store.userInfo.auth || []
  // || arr.indexOf('boss') > -1
  if (arr.indexOf('manager') > -1) {
    return true
  } else {
    return false
  }
})
// 下载
function downFile(fileUrl) {
  // 使用fetch获取文件内容
  fetch(fileUrl)
    .then((response) => {
      // 从文件URL中提取文件扩展名
      const filename = fileUrl.split("/").pop(); // 获取URL中的文件名
      const fileExtension = filename.split(".").pop(); // 获取文件扩展名
      const contentType = response.headers.get("content-type");

      // 创建一个下载链接
      const downloadLink = document.createElement("a");
      downloadLink.href = URL.createObjectURL(response.blob());
      downloadLink.download = `downloaded-file.${fileExtension}`; // 设置下载的文件名及扩展名
      downloadLink.style.display = "none";

      // 将下载链接添加到页面上
      document.body.appendChild(downloadLink);

      // 模拟点击下载链接以触发文件下载
      downloadLink.click();

      // 移除下载链接
      document.body.removeChild(downloadLink);
    })
    .catch((error) => {
      ElMessage({
        type: "error",
        message: "下载失败！",
      });
    });
}
// 获取客户数据
let topTable = ref([]);
function getCustomer(type) {
  return new Promise((resolve, reject) => {
    customerApi({
      is_sys: type,
    }).then((data) => {
      resolve(data);
    });
  });
}
let dialogInfoRef = ref(null);
function openInfo() {
  dialogInfoRef.value.initFun("update", props.customer);
}
const emit = defineEmits(["refreshTab2"]);
function refreshTable() {
  emit("refreshTab2");
}
// 资质证件
let tableData = ref([]);
let certloading = ref(false);
function getCertList() {
  certloading.value = true;
  listApi({
    customer_id: props.dataInfo.id,
  })
    .then((res) => {
      tableData.value = res;
      certloading.value = false;
    })
    .catch(() => {
      certloading.value = false;
    });
}
let certAddPageRef = ref(null);
function openCert() {
  certAddPageRef.value.initFun("add");
}
function refreshCert() {
  getCertList();
}
// 编辑
function updateOpen(row) {
  certAddPageRef.value.initFun("update", row);
}
// 删除
function delFun(id) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getCertList();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function initFun() {

  getCustomer(1).then((res) => {
    topTable.value = res.filter((item) => {
      return item.page_num == 1 || item.in_form == 1;
    });
    getCustomer(0).then((res) => {
      let arr = res.filter((item) => {
        return item.page_num == 1 || item.in_form == 1;
      });
      topTable.value = [...topTable.value, ...arr];
    });
  });
  getCertList();
}
defineExpose({
  initFun,
});
//
onMounted(() => {

});
</script>

<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;

  .tab2-title {
    display: flex;
    justify-content: space-between;
    height: 46px;
    background: #fafbfc;
    box-sizing: border-box;
    padding-right: 10px;

    .left {
      align-self: center;
      font-size: 14px;
      font-weight: bold;
      color: #172b4d;
      position: relative;
      padding-left: 7px;

      &::before {
        content: "";
        width: 2px;
        height: 15px;
        background: #005ecc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .right {
      align-self: center;
    }
  }

  :deep(.el-descriptions__label) {
    width: 15%;
  }
}
</style>
